<template>
  <div>
    <el-container>
      <el-header class="header">
        <div class="system">
          <img src="http://47.94.137.36:8080/images/xh829.png" />
          <span style="font-weight: 700; font-size: 18px; margin-left: 10px"
            >科技OA协同办公系统</span
          >
        </div>
        <el-menu
          mode="horizontal"
          background-color="#996699"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
          class="menu"
        >
          <el-menu-item
            v-for="(item, index) in navigatelist"
            :key="index"
            :index="item.name"
            >{{ item.name }}</el-menu-item
          >
        </el-menu>
        <div class="system-right">
          <p>
            <el-icon style="margin-right:5px"><Iphone /></el-icon>手机版
          </p>
          <p>
            <el-icon style="margin-right: 5px"><ChatRound /></el-icon>即时通讯
          </p>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <img
                src="http://47.94.137.36:8080/upload/face/1_7243.jpg"
                alt=""
              />
              <span>管理员</span>
              <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Tools">个人设置</el-dropdown-item>
                <el-dropdown-item :icon="Bell">提醒信息</el-dropdown-item>
                <el-dropdown-item :icon="PictureFilled"
                  >修改头像</el-dropdown-item
                >
                <el-dropdown-item :icon="UserFilled"
                  >账号(admin)</el-dropdown-item
                >
                <el-dropdown-item :icon="SwitchButton">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside
          width="200px"
          style="height: 955px; background-color: #f8f9fb"
          v-show="isCollapse"
        >
          <div
            style="
              background-color: #b598b5;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 10px;
              height: 44px;
            "
          >
            <div style="display: flex; align-items: center">
              <!-- <svg t="1721385868860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6359" width="20" height="20"><path d="M872.8 112H151.2c-48.1 0-87.2 39.6-87.2 88.3V650c0 48.7 39.1 88.3 87.2 88.3h298.6L290 912h444L574.2 738.3h298.6c48.1 0 87.2-39.6 87.2-88.3V200.3c0-48.7-39.1-88.3-87.2-88.3z m-745.4 88.3c0-13.3 10.7-24.1 23.8-24.1h721.6c13.1 0 23.8 10.8 23.8 24.1v305.1H127.4V200.3z" fill="#ffffff" p-id="6360"></path></svg> -->
              <span style="color: #fff; margin-left: 5px">{{
                counterStore.sideValue
              }}</span>
            </div>
            <div>
              <van-icon name="search" color="#fff" size="20" />
              <van-icon
                name="wap-nav"
                color="#fff"
                size="20"
                style="margin-left: 10px"
                @click="isCollapse = false"
              />
            </div>
          </div>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @select="handleSelectSide"
            router
          >
            <el-sub-menu
              :index="item.name"
              v-for="item in sideList"
              :key="item._id"
              v-show="item.navigation == counterStore.sideValue"
            >
              <template #title>
                <!-- <el-icon><location/></el-icon> -->
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="item2 in item.children"
                  :key="item2._id"
                  :index="item2.router"
                  >{{ item2.name }}</el-menu-item
                >
              </el-menu-item-group>
            </el-sub-menu>

            <!-- <el-menu-item v-for="item in sideList" :key="item._id" v-show="item.navigation==navigateValue">
              <span>{{item.name}}</span>
            </el-menu-item> -->
          </el-menu>
        </el-aside>
        <el-aside
          width="30px"
          style="height: 955px; background-color: #b598b5; padding-left: 3px"
          v-show="isCollapse == false"
        >
          <van-icon
            name="wap-nav"
            color="#fff"
            size="20"
            @click="isCollapse = true"
          />
          <p style="color: #fff">打开导航栏</p>
        </el-aside>
        <el-main>
          <el-tabs
            type="border-card"
            style="width: 100%; margin-left: -20px; margin-top: -20px"
          >
            <el-tab-pane
              v-for="(item, index) in tabPaneList"
              :key="index"
              :label="item.name"
              :closable="item.name == '首页' ? false : true"
            >
              <RouterView />
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { AxiosServer } from "@/utils";
import { useCounterStore } from "@/stores/counter";
import {
  UserFilled,
  SwitchButton,
  PictureFilled,
  Bell,
  Tools,
} from "@element-plus/icons-vue";
const counterStore = useCounterStore();
const router = useRouter();
const isCollapse = ref(true);
const navigatelist = ref([]);
const sideList = ref([]);
const tabPaneList = ref([{ name: "首页", router: "about" }]);

const handleSelect = (key) => {
  counterStore.handleSelect(key);
};
//点击侧边栏，切换面包屑
const handleSelectSide = (key, keyPath) => {
  console.log(key, keyPath);
  sideList.value.forEach((item) => {
    console.log(!item.children);
    // if(!item.children){
    //   tabPaneList.value.push({name:item.name,router:item.router})
    //   localStorage.setItem('tabPaneList',JSON.stringify(tabPaneList.value))
    // }else{
    //   item.children.forEach(item2=>{
    //     if(item2.router==key){
    //       tabPaneList.value.push({name:item2.name,router:item2.router})
    //       localStorage.setItem('tabPaneList',JSON.stringify(tabPaneList.value))
    //     }
    //   })
    // }
  });
};

//移除面包屑

//顶部导航
const getNavigate = async () => {
  let {
    data: { navigateList },
  } = await AxiosServer.get("/lzs/getNavigate");
  navigatelist.value = navigateList;
};

//侧边导航
const getSide = async () => {
  let {
    data: { list },
  } = await AxiosServer.get("/lzs/getSide");
  sideList.value = list;
  console.log(list);
};

onMounted(() => {
  getNavigate();
  getSide();
  localStorage.setItem("tabPaneList", JSON.stringify(tabPaneList.value));
});
</script>

<style lang="scss" scoped>
.header {
  background-color: #996699;
  display: flex;
  .system {
    color: #fff;
    display: flex;
    align-items: center;
    line-height: 60px;
    width: 20%;
  }
  .menu {
    width: 70%;
  }
  .system-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 20%;
    color: #fff;
    p {
      display: flex;
      align-items: center;
    }
    .el-dropdown-link {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100px;
      color: #fff;
    }
    img {
      width: 25px;
      height: 25px;
      border-radius: 50px;
    }
  }
}
</style>
